<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div class="root">
        姓：<input type="text" v-model="surname">
        <br>
        名：<input type="text" v-model="name">
        <br>

        <!-- {{}}应该写在标签内，且括号内为，表达式,模板中的表达式要尽可能简单 -->
        姓名：<span>{{fullname()}}</span>
        <!-- 注意，一定要加（），若不加（）代表着这个函数，若+(),则代表着执行这个函数，返回他的结果 -->
    </div>

    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '.root',
            data: {
                surname: '张',
                name: '三',
                // fullname: surname + '' + 'name'
            },
            methods: {
                fullname() {
                    return this.surname+''+this.name
                    //使用return返回值
                }
            }
        })
    </script>
</body>

</html>